* {
    margin: 0;
    padding: 0;
}

:root {
    --themeColor: #ffb3cc;
}

#home {
    display: block;
}

/* #blogTitle h1, */
#lnkBlogLogo,
#sideBar,
#footer {
    display: none;
}

/* 初始化 */
body {
    position: relative;
    font-size: 14px;
    color: #555;
    line-height: 1;
    background-image: url(https://guangzan.gitee.io/imagehost/awescnb/images/bg/cell.gif);
    font-family: '等线';
}

a {
    color: inherit;
    cursor: pointer;
}

a,
a:hover,
a:link,
a:visited {
    text-decoration: none !important;
}

ol,
ul {
    list-style: none;
}

::selection {
    background: var(--themeColor);
    color: #fff;
}

::-webkit-scrollbar {
    display: none;
}

body::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
}

body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--themeColor);
}

body::-webkit-scrollbar-track {
    background: 0 0;
    border-radius: 2px;
}

.icon {
    width: 27px;
    height: 27px;
    vertical-align: -8.1px;
    fill: currentColor;
    overflow: hidden;
    color: inherit;
}

/* nav start */

header {
    position: relative;
    width: 100vw;
    overflow: hidden;
}

#blogTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 287.982px;
    border-bottom: 1px;
    background-image: url(https://guangzan.gitee.io/imagehost/awescnb/images/anime/22.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    animation: bg-move 20s linear infinite;
    animation-direction: alternate;
}

#blogTitle::after {
    position: absolute;
    z-index: 1;
    display: block;
    overflow: hidden;
    width: 100%;
    content: ' ';
    bottom: 0;
    height: 33%;
    background: linear-gradient(
        180deg,
        hsla(0, 0%, 100%, 0) 0,
        hsla(0, 0%, 100%, 1)
    );
}

#blogTitle h1 {
    color: #fff;
    font-size: 28.7982px;
    text-align: center;
    text-shadow: 0 0 2px var(--themeColor),
        0 0 2px var(--themeColor);
}

#navigator {
    position: fixed;
    top: 0;
    display: flex;
    width: 100vw;
    height: 43.2px;
    line-height: 25.92px;
    color: #444;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    z-index: 10;
    backdrop-filter: blur(5px);
}
.sidebar-block {
    h3 {
        white-space: nowrap;
    }
}

#navigator a {
    padding: 0 15.822px;
    transition: background-color 0.2s;
    background-color: transparent;
    white-space: nowrap;
    cursor: pointer;
}

#navigator li {
    display: flex;
    align-items: center;
}

#navigator .icon {
    width: 54px;
}

#navList {
    display: flex;
    padding-left: 0;
}

.blogStats {
    /* display: flex;
    align-items: center; */
    display: none;
}

#topdigg_posts_wrap,
#topdigg_posts_wrap .catListView,
#sidebar_topcommentedposts .catListFeedback,
#sidebar_recentcomments .catListComment,
#sidebar_recentposts .catListEssay,
#sidebar_toptags .catListTag,
#sidebar_categories,
#navigator li,
#sidebar_postcategory,
#sidebar_postarchive,
#sidebar_scorerank,
#blog-sidecolumn,
.catListView {
    display: flex;
    align-items: center;
    height: 100%;
}

#user-msg > a {
    font-size: 27px;
    font-weight: bold;
}

#user-msg-details {
    position: absolute;
    top: 43.2px;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 5px;
}

#blog-sidecolumn h3 {
    font-weight: 700;
}

#TopDiggPostsBlock,
#TopFeedbackPostsBlock,
#sidebar_recentcomments .RecentCommentBlock,
#TopViewPostsBlock {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

#sidebar_topdiggedposts:hover,
#sidebar_topcommentedposts:hover,
#sidebar_recentcomments:hover,
#sidebar_recentposts:hover,
#sidebar_toptags:hover,
#sidebar_postcategory:hover,
#sidebar_postarchive:hover,
#navigator li:hover,
#sidebar_topviewedposts:hover,
.sidebar-block:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.8s;
}

#user-msg,
#sidebar_postcategory,
#sidebar_topdiggedposts,
#sidebar_topcommentedposts,
#sidebar_recentcomments,
#sidebar_recentposts,
#sidebar_toptags,
#sidebar_postarchive,
#sidebar_topviewedposts,
#sidebar_scorerank,
#sidebar_shortcut,
.sidebar-block {
    position: relative;
    padding: 0 15.822px;
    display: flex;
    align-items: center;
    height: 100%;
}

#user-msg ul,
#sidebar_postarchive ul,
#sidebar_topdiggedposts ul,
#sidebar_topcommentedposts ul,
#sidebar_topviewedposts ul,
#sidebar_recentcomments ul,
#sidebar_recentposts ul,
#sidebar_toptags ul,
#sidebar_topviewedposts ul,
#sidebar_postcategory ul,
#sidebar_scorerank ul,
#sidebar_shortcut ul,
#sidebar_search_box {
    display: none;
    position: absolute;
    top: 43.2px;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    word-break: keep-all;
    min-width: 144.0018px;
    padding: 10px 5px;
    border-radius: 0 0 3px 3px;
}

.catListTitle {
    cursor: pointer;
}

/* nav start */

/* footer */
body footer {
    margin: 54px 0 0;
    padding: 32.4px 0;
    border-top: 1px solid #eee;
    text-align: center;
    background-color: #f6f9fa;
}

#links ul {
    display: flex;
    justify-content: center;
}

#links ul li:hover {
    text-shadow: 0 0 2px var(--themeColor);
}

#links > ul > li:not(:first-child) {
    margin-left: 21.6px;
}

#copyright {
    display: flex;
    flex-direction: column;
    margin-top: 14.4018px;
}

#copyright span {
    margin-top: 7.1982px;
}

#copyright a {
    font-weight: 700;
}

/* 顶部进度条 */
#top-progress {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(
            to right top,
            var(--themeColor) 50%,
            transparent 50%
        )
        no-repeat;
    background-size: 100% calc(100% - 100vh + 5px);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: darken;
}

#top-progress::after {
    content: '';
    position: fixed;
    top: 5px;
    bottom: 0;
    right: 0;
    left: 0;
    background: #fff;
    z-index: 1;
}

/* 首页随笔列表 */
#index-item-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 21.6px;
}

#cb_post_title_url {
    display: block;
    border-bottom: 02px solid #eee;
    line-height: 2em;
    font-size: 15.8382px;
    color: var(--color-post-title);
}

.post-item {
    position: relative;
    margin: 17.28px;
    width: 26%;
    height: 198.0018px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 01px solid #dcdcdc;
    transition: box-shadow 0.2s;
    box-shadow: 0 0 7.1982px 0 #e8e8e8;
}

.post-item:hover {
    transition: box-shadow 0.2s;
    box-shadow: 0 0 7.1982px 0 #bcbcbc;
}

.postTitle {
    font-weight: 700;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}

.post-item:hover > .postTitle {
    transition: opacity 0.2s;
    opacity: 1;
}

/* 随笔页 */
#cb_post_title_url {
    display: none;
}

#mainContent {
    width: 55%;
    margin: 14.4018px auto;
    padding: 25px;
    background: rgb(253, 230, 224);
    font-size: 16px !important;
    border-radius: 3px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

#comment_form {
    margin: 27px auto;
}

/* 随笔底部所属分类、标签、日期 */
#post-details {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 30px;
    font-size: 14px;
}

#post-details div {
    display: flex;
    align-items: center;
    margin: 10px 20px 0 0;
}

#post-details div a,
#post-details div span,
#post-pre-next a {
    display: block;
    margin-left: 3px;
    background: #f4f4f4;
    padding: 2px 8.64px;
}

#post-category a {
    border-radius: 100px;
}

#post-details div a:hover,
#post-details div span:hover,
#post-pre-next a:hover {
    color: var(--themeColor);
    border: 1px solid var(--themeColor);
}

/* 上一篇 下一篇 */
#post-pre-next {
    display: flex;
    margin-top: 10px;
}

#post-pre-next div {
    display: flex;
    align-items: center;
}

#post-pre-next a {
    margin-left: 3px;
}

#post-next {
    margin-left: 20px;
}

/* 赞/踩 */
#div_digg {
    display: none;
}

/* 随笔目录 */
#catalog {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    padding: 5px;
    max-height: 500px;
    max-width: 220px;
    min-width: 110px;
    z-index: 9999;
    font-size: 14px;
    color: #555;
    border-radius: 5px;
    overflow: scroll；;
}

#catalog-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#catalog #catalog-title h3 {
    color: var(--themeColor);
    font-size: 16px;
    text-decoration: underline;
}

#catalog ul {
    margin: 10px 0 0;
    max-width: 200px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
}

#catalog ul li {
    margin-top: 15px;
}

#catalog li {
    white-space: nowrap;
}

#catalog ul > li > a:hover {
    text-decoration: none;
}

.h1-list {
    font-weight: 700;
}

.h1-list ~ .h2-list {
    margin-left: 0.7em;
}

.h2-list ~ .h3-list {
    margin-left: 1.4em;
}

#catalog .catalog-active {
    color: var(--themeColor);
}

/* 写评论 start */

#comment_form_container > p:nth-of-type(3),
#comment_form_container > a:first-of-type,
#divCommentShow,
#ad_text_under_commentbox,
#comment_nav,
#commentbox_opt > a,
#tip_comment2 {
    display: none;
}

#comment_form_container > p:last-of-type {
    color: var(--text-9);
}

#comment_form_container {
    position: relative;
}

#commentform_title {
    padding: 10px 0;
    border-bottom: 2px dotted var(--themeColor);
    background: none;
    font-weight: 700;
}

#comment_form_container .comment_textarea,
#tbCommentBody {
    background: none;
}

#tbCommentBody {
    height: 81px;
    min-height: 81px;
    color: var(--text-5);
}

.comment_textarea {
    width: 100%;
    border-color: var(--text-9);
}

.commentbox_title {
    border-bottom-color: var(--text-9);
}

.comment_textarea .commentbox_title,
.comment_textarea {
    border-color: var(--themeColor);
    transition: border-color 0.2s;
}

#btn_comment_submit {
    position: absolute;
    bottom: -10.8px;
    right: 0;
    width: 75.6px;
    height: 32.4px;
    color: var(--text-a);
    border-radius: 4px;
    border: none;
    background-color: #00a1d6;
    user-select: none;
    outline: none;
    cursor: pointer;
    font-size: 10.098px;
}

#btn_comment_submit:hover {
    background-color: var(--themeColor);
    transition: background-color 0.3s;
}

/* 写评论 end */

/* 评论列表 start */
.commentbox_title_left {
    display: none;
}

.feedback_area_title {
    padding: 7.56px 10.8px;
    border-bottom: 1px solid var(--themeColor);
    background-color: var(--background-e);
    border-radius: 2px 2px 0 0;
    font-size: 10.8px;
    font-weight: 700;
    color: var(--text-3);
}

.feedbackListSubtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5px;
    font-size: 5.4px;
    color: #999;
}

.feedbackListSubtitle .feedbackManage {
    order: 3;
}

.comment_actions {
    border-bottom: 1px solid var(--themeColor);
}

.feedbackListSubtitle .comment_vote {
    order: 4;
}

.comment_vote a {
    padding-left: 5.4px;
}

.feedbackItem {
    padding: 17.982px 10.8px;
}

#blog-comments-placeholder {
    margin: 21.6px 0;
    border: 1px solid var(--text-10);
}

#blog-comments-placeholder .feedbackItem:last-child {
    border-bottom: 1px solid var(--text-10);
}

#blog-comments-placeholder br {
    display: none;
}

#post-comments-list {
    margin-top: 21.6px;
    width: 100%;
}

.custom-comment-avatar {
    align-self: baseline;
}

.avatar {
    border: 1px solid #eee;
    border-radius: 50%;
    transform: scale(0.7);
}

.feedbackCon {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.feedbackCon .blog_comment_body {
    position: relative;
    margin-left: 10px;
    margin-top: 5.4px;
    padding: 0 10.8px;
    background-color: var(--themeColor);
    border-radius: 3px;
    color: var(--text-5);
    font-size: 13.5px;
    max-width: 540px;
    line-height: 1.6;
    padding: 5.4px 10.8px;
}

.blog_comment_body:before {
    content: '';
    display: block;
    position: absolute;
    left: -24.84px;
    top: 5.4px;
    width: 12.258px;
    height: 0;
    border-right: solid 12.96px var(--themeColor);
    border-top: solid 3.24px rgba(0, 0, 0, 0);
    border-bottom: solid 7.182px rgba(0, 0, 0, 0);
}

.custom-comments-author {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.custom-comments-author .louzhu {
    color: var(--themeColor);
}

.custom-comments-author .blog_comment_body {
    background-color: #61aeee;
}

.custom-comments-author img {
    margin-left: 10.8px;
}

.custom-comments-author .blog_comment_body::before {
    display: none;
}

.custom-comments-author .blog_comment_body::after {
    content: '';
    display: block;
    position: absolute;
    right: -24.84px;
    top: 5.4px;
    width: 12.258px;
    height: 0;
    border-left: solid 12.96px #61aeee;
    border-top: solid 3.24px rgba(0, 0, 0, 0);
    border-bottom: solid 7.182px rgba(0, 0, 0, 0);
}

.custom-comments-author .feedbackManage {
    order: 0;
}

.custom-comments-author .layer {
    margin-left: 5.4px;
    order: 3 !important;
}

.custom-comments-author .comment_vote {
    order: -3;
}

.custom-comments-author .comment_date {
    order: -1 !important;
}

.custom-comments-author .feedbackManage {
    order: -2 !important;
}

.custom-comments-author .feedbackCon {
    flex-direction: row-reverse;
}

.feedbackCon .blog_comment_body img {
    width: 27px;
    height: 27px;
}

.blog_comment_body > a:first-of-type,
.blog_comment_body p a:nth-child(1) {
    color: #fff;
}

.feedbackListSubtitle > a:last-of-type {
    color: #00a1d6;
    order: 1;
}

.feedbackManage {
    margin-right: 10.8px;
    order: 3;
}

.feedbackListSubtitle > a:last-of-type:hover {
    color: var(--themeColor);
    transition: all 0.2s;
}

#blog-comments-placeholder .layer {
    padding: 0 5.4px;
    color: var(--text-a);
    background-color: var(--themeColor);
    border-radius: 3px;
    margin-right: 5.4px;
    order: 0;
}

#blog-comments-placeholder .comment_date {
    margin: 0 5.4px;
    order: 2;
}

.feedbackCon br {
    display: none;
}

.comment_vote {
    font-size: 5.4px;
    color: #999;
}

/* 评论列表 end */
/* 返回顶部按钮 */
#back2Top {
    position: fixed;
    bottom: 36.018px;
    right: 151.2px;
}

/* 标签页面 */
#taglist_title_wrap,
#taglist {
    display: none;
}

/* markdown */

#cnblogs_post_body {
    overflow: hidden;
}
#cnblogs_post_body ol {
    padding-left: 30px;
}

#cnblogs_post_body img {
    max-width: 100%;
}

#cnblogs_post_body img,
#cnblogs_post_body ol li {
    margin-top: 10px;
}

#cnblogs_post_body p {
    line-height: 2;
}

#cnblogs_post_body h1 {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: var(--themeColor);
}

#cnblogs_post_body h1 svg {
    margin-right: 5px;
}

#cnblogs_post_body h2 {
    font-size: 20px;
}

#cnblogs_post_body h3 {
    font-size: 16px;
}

#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3 {
    margin: 32.4px 0 7.1982px;
}

#cnblogs_post_body ul li {
    line-height: 24.3px;
}

#cnblogs_post_body table,
.cnblogs-post-body table,
#cnblogs_post_body .hljs-ln-code {
    border: none;
}

#cnblogs_post_body .hljs-ln-code {
    padding: 02px 5.0382px;
}

#cnblogs_post_body .hljs {
    display: block !important;
    padding: 0.5em !important;
    color: var(--hl-mono-1) !important;
    background: var(--hl-base) !important;
}

#cnblogs_post_body .hljs-tag {
    color: var(--hl-tag);
}

#cnblogs_post_body .hljs-comment,
#cnblogs_post_body .hljs-quote {
    color: var(--hl-mono-3);
    font-style: italic;
}

#cnblogs_post_body .hljs-doctag,
#cnblogs_post_body .hljs-formula,
#cnblogs_post_body .hljs-keyword {
    color: var(--hl-hue-3);
}

#cnblogs_post_body .hljs-deletion,
#cnblogs_post_body .hljs-name,
#cnblogs_post_body .hljs-section,
#cnblogs_post_body .hljs-selector-tag,
#cnblogs_post_body .hljs-subst {
    color: var(--hl-hue-5);
}

#cnblogs_post_body .hljs-literal {
    color: var(--hl-hue-1);
}

#cnblogs_post_body .hljs-addition,
#cnblogs_post_body .hljs-attribute,
#cnblogs_post_body .hljs-meta-string,
#cnblogs_post_body .hljs-regexp,
#cnblogs_post_body .hljs-string {
    color: var(--hl-hue-4);
}

#cnblogs_post_body .hljs-built_in,
#cnblogs_post_body .hljs-class .hljs-title {
    color: var(--hl-hue-6-2);
}

#cnblogs_post_body .hljs-attr,
#cnblogs_post_body .hljs-number,
#cnblogs_post_body .hljs-selector-attr,
#cnblogs_post_body .hljs-selector-class,
#cnblogs_post_body .hljs-selector-pseudo,
#cnblogs_post_body .hljs-template-variable,
#cnblogs_post_body .hljs-type,
#cnblogs_post_body .hljs-variable {
    color: var(--hl-hue-6);
}

#cnblogs_post_body .hljs-bullet,
#cnblogs_post_body .hljs-link,
#cnblogs_post_body .hljs-meta,
#cnblogs_post_body .hljs-selector-id,
#cnblogs_post_body .hljs-symbol,
#cnblogs_post_body .hljs-title {
    color: var(--hl-hue-2);
}

#cnblogs_post_body .hljs-emphasis {
    font-style: italic;
}

#cnblogs_post_body .hljs-strong {
    font-weight: 700;
}

#cnblogs_post_body .hljs-link {
    text-decoration: underline;
}

#cnblogs_post_body code {
    background-color: #f9f2f4 !important;
    color: #c7254e !important;
    font-size: 0.87em !important;
    padding: 0 2.8782px !important;
    word-break: break-word !important;
    overflow-x: auto !important;
    border: none !important;
}

#cnblogs_post_body blockquote {
    padding: 7.1982px;
    background: #f6f9fa;
    border: none;
    border-left: 3px solid var(--themeColor);
}

mark {
    padding: 02px 2.8782px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 2.16px;
}

/* 随笔签名 */
#post-signature {
    background-color: #ece6e6 !important;
}

#post-signature p {
    line-height: 1.5;
}

/* 复制按钮 */
.copy-btns {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 10px;
    font-size: 0.5em;
    cursor: pointer;
    filter: invert(0.8);
}

/* 分页器 start */
.topicListFooter {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0 27px;
}

#nav_next_page {
    display: flex;
    justify-content: center;
    margin: 10px 0;
    padding: 2.7px 10.8px;
    border-radius: 2px;
    background-color: #00a1d6;
    color: #fff;
}

#nav_next_page:hover {
    background-color: var(--themeColor);
    transition: background-color 0.2s;
}

.pager a {
    color: #fff;
    background-color: #00a1d6;
    border-color: #00a1d6;
    border-radius: 2px;
}

.pager a:hover {
    background-color: var(--themeColor);
    border-color: var(--themeColor);
    transition: all 0.2s;
}

/* 分页器 end */

/* 音乐播放器 */
#iframe-music,
.music-APlayer {
    position: fixed;
    bottom: 14.4018px;
    left: 7.1982px;
}

#cnblogs_post_body td {
    min-width: 0;
}

/* 覆盖博客园bundle css*/
@media screen and (max-width: 767px) {
    header img {
        max-width: 100vw !important;
    }

    .cnblogs-post-body th,
    .cnblogs-post-body td {
        white-space: pre;
    }
}

/* github */
#custom-github {
    display: flex;
    align-items: center;
}

/* index */

.entrylist .entrylistTitle:not(:first-of-type),
.day .dayTitle:not(:first-of-type) {
    border-top: 1px solid hsla(0, 0%, 59.2%, 0.1);
}

.PostListTitle,
.entrylistTitle,
.dayTitle {
    border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
    padding: 14.418px;
    color: var(--text-4);
    font-size: 16.2px;
}

.PostList,
.entrylistPosttitle,
.entrylistPostSummary,
.entrylistItemPostDesc,
.postTitle,
.postCon,
.postDesc {
    padding: 5.4px 14.418px;
}

.c_b_p_desc_readmore {
    display: table;
    margin-top: 5.4px;
    padding: 2.7px 5.4px 2.7px 8.1px;
    border: 1px solid var(--themeColor);
    color: var(--themeColor);
    border-radius: 3px;
}

/* 移动端 */
@media screen and (max-width: 768px) {
    body {
        background: #fde6e0;
    }

    .blogStats {
        display: none;
    }

    #blogTitle {
        height: 216px;
    }

    #blogTitle {
        animation-name: bg-move-m;
    }

    #custom-github {
        display: flex;
        justify-content: center;
    }

    #sidebar_search {
        display: none;
    }

    /* 评论列表 start */
    .feedbackCon .blog_comment_body {
        max-width: 324px;
    }

    /* 评论图片 */
    #blog-comments-placeholder .feedbackListSubtitle {
        font-size: 12px;
    }

    #blog-comments-placeholder .comment_date {
        /* width: 97.2px; */
        overflow: hidden;
        white-space: nowrap;
    }

    #blog-comments-placeholder.comment_vote {
        display: none;
    }

    #blog-comments-placeholder
        .feedbackListSubtitle
        > a:last-of-type {
        /* width: 118.8px; */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 评论列表 end */
    #mainContent {
        width: 100%;
        padding: 0;
    }

    #cnblogs_post_body {
        padding: 0 27px;
    }

    #green_channel {
        display: flex;
        justify-content: space-around;
        margin: 0;
        width: 100%;
        border: none;
        /* padding: 0; */
    }

    #green_channel a {
        display: block !important;
    }

    #post-pre-next,
    #post-details,
    #blog-comments-placeholder,
    #comment_form {
        width: 100%;
    }

    #comment_form_container,
    #blog_post_info_block,
    .postDesc {
        padding: 0 27px;
    }

    /* 随笔页 */
    #post-wrap {
        display: none;
        width: 70%;
        margin: 80px auto 0;
    }

    /* 返回顶部按钮 */
    #back2Top {
        bottom: 21.6px;
        right: 32.4px;
    }

    /* 移动端侧边栏按钮 */
    #side-btn-wrap {
        visibility: hidden;
        position: fixed;
        bottom: 21.6px;
        right: 27px;
        padding: 18.9px;
        background: #fff;
        box-shadow: 1px 1px 8px var(--themeColor);
        border-radius: 50%;
    }

    #side-btn {
        position: relative;
        width: 25px;
        height: 25px;
        cursor: pointer;
    }

    #side-btn-burger {
        position: absolute;
        background: #73c9e5;
        width: 100%;
        height: 3px;
        top: 50%;
        right: 0;
        margin-top: -1px;
        opacity: 1;
        transition: all 0.2s ease-in-out;
    }

    #side-btn-burger:after,
    #side-btn-burger:before {
        border-radius: 2px;
        background: #73c9e5;
        position: absolute;
        width: 100%;
        height: 3px;
        content: '';
        display: block;
        transition: all 0.2s ease-in-out;
    }

    #side-btn-burger:before {
        top: 10px;
    }

    #side-btn-burger:after {
        bottom: 10px;
    }

    #side-btn.side-btn-active #side-btn-burger {
        background: 0 0;
    }

    #side-btn.side-btn-active #side-btn-burger:before {
        transition: all 0.2s ease-in-out;
        transform: rotate(45deg);
        top: 0;
    }

    #side-btn.side-btn-active #side-btn-burger:after,
    #side-btn.side-btn-active #side-btn-burger:before {
        transition: all 0.2s ease-in-out;
    }

    #side-btn.side-btn-active #side-btn-burger:after {
        transition: all 0.3s ease-in-out;
        transform: rotate(-45deg);
        bottom: 0;
    }

    #side-btn.side-btn-active #side-btn-burger:after,
    #side-btn.side-btn-active #side-btn-burger:before {
        transition: all 0.2s ease-in-out;
    }

    /* header */
    header #header-img {
        animation: none;
    }

    /* 侧边栏 */
    #navigator {
        display: none;
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        z-index: 100;
        overflow-y: scroll;
        clip-path: circle(30px at calc(100%) 100%);
        background-color: #fff;
        filter: none;
    }

    #navigator > li {
        display: flex;
        justify-content: center;
        height: auto;
        text-align: center;
    }

    #navigator li a {
        display: contents;
    }

    #user-msg {
        display: flex;
        flex-direction: column;
    }

    #user-msg-details {
        position: static;
        display: block;
        background: none;
    }

    #blog-sidecolumn,
    #sidebar_categories {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #blog-sidecolumn {
        height: auto;
    }

    #navigator > li:nth-child(3),
    #navigator > li:nth-child(4),
    #navigator > li:nth-child(6) {
        display: none;
    }

    #navigator > li,
    #topdigg_posts_wrap,
    #topdigg_posts_wrap .catListView,
    #sidebar_topcommentedposts .catListFeedback,
    #sidebar_recentcomments .catListComment,
    #sidebar_recentposts .catListEssay,
    #sidebar_toptags .catListTag,
    #sidebar_categories,
    #navigator li,
    #sidebar_postcategory,
    #sidebar_postarchive,
    #sidebar_scorerank,
    .catListView {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: auto;
    }

    #navigator > li,
    .catListTitle {
        padding: 10px 0;
        width: 100%;
        text-align: center;
    }

    #sidebar_postarchive ul,
    #sidebar_topdiggedposts ul,
    #sidebar_topcommentedposts ul,
    #sidebar_topviewedposts ul,
    #sidebar_recentcomments ul,
    #sidebar_recentposts ul,
    #sidebar_toptags ul,
    #sidebar_recentposts ul,
    #sidebar_postcategory ul,
    #sidebar_shortcut ul,
    #sidebar_search_box,
    #sidebar_scorerank ul {
        position: static;
        background: none;
        min-width: 100vw;
        padding: 10px 0;
        border-radius: none;
    }

    #TopDiggPostsBlock,
    #TopFeedbackPostsBlock,
    #sidebar_recentcomments .RecentCommentBlock,
    #TopViewPostsBlock {
        position: static;
    }

    .post-item {
        width: 100%;
    }

    /* 写评论 */
    #btn_comment_submit {
        bottom: 2px;
    }

    /* 侧边菜单按钮 */
    #side-btn-wrap {
        visibility: visible;
        z-index: 101;
    }

    /* 音乐播放器 */
    #iframe-music,
    .music-APlayer {
        display: none;
    }
}

/* header */
@keyframes bg-move {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 -300px;
    }
}

@keyframes bg-move-m {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 -50px;
    }
}
